<template>
  <view class="container">
      <!-- 卡片显示预约入园时间和选中的日期 -->
      <view class="cardview">
        <uni-card>
          <uni-row>
            <uni-col :span="5">
              <!-- 目标文字显示用户选择的日期和时间 -->
              <image src="../../static/bianzu.png" class="icon" />
            </uni-col>
            <uni-col :span="19">
              <!-- 你可以在这里放置其他内容，如按钮等 -->
			  <view class="card-texts">
			  <text class="target">预约入园时间:</text><br>
			  <text class="target">{{ selectedDate }} {{ selectedTime }}</text>
			  </view>
            </uni-col>
          </uni-row>
        </uni-card>
    </view>

    <!-- 主预约人信息 -->
    <view class="form-section">
      <view class="form-title">主预约人</view>
      <view class="form-item">
        <text class="form-label">姓名：</text>
        <input type="text" placeholder="请输入预约人姓名" v-model="mainUser.name" class="form-input"/>
      </view>
      <view class="form-item">
        <uni-section title="证件类型" type="line">
          <uni-data-select
              v-model="value"
              :localdata="range"
              @change="change"
          ></uni-data-select>
        </uni-section>
      </view>
      <view class="form-item">
        <text class="form-label">证件号码：</text>
        <input type="text" placeholder="请输入证件号码" v-model="mainUser.idNumber" class="form-input"/>
      </view>
      <view class="form-item">
        <text class="form-label">手机号：</text>
        <input type="text" placeholder="请输入手机号" v-model="mainUser.phoneNumber" class="form-input"/>
      </view>

      <!-- 儿童人数选择器 -->
      <view class="form-item">
        <uni-section title="儿童人数" type="line">
          <uni-data-select
              v-model="selectedValue"
              :localdata="options"
              @change="Change"
          ></uni-data-select>
        </uni-section>
      </view>
    </view>

    <!-- 同行人信息 -->
    <view v-for="(companion, index) in companions" :key="index" class="form-section">
      <view class="form-title">同行人{{ index + 1 }}</view>
      <view class="form-item">
        <text class="form-label">姓名：</text>
        <input type="text" placeholder="请输入预约人姓名" v-model="companionname" class="form-input"/>
      </view>
      <view class="form-item">
        <uni-section title="证件类型" type="line">
          <uni-data-select
              v-model="companionValue"
              :localdata="idTypes"
              @change="Change"
          ></uni-data-select>
        </uni-section>
      </view>

      <view class="form-item">
        <text class="form-label">证件号码：</text>
        <input type="text" placeholder="请输入证件号码" v-model="companion.idNumber" class="form-input"/>
      </view>
      <view class="form-item">
        <text class="form-label">手机号：</text>
        <input type="text" placeholder="请输入手机号" v-model="companion.phoneNumber" class="form-input"/>
      </view>
      <button @click="removeCompanion(index)" class="delete-button">删除</button>
    </view>

    <!-- 添加同行人按钮 -->
    <button class="add-companion" @click="addCompanion">添加同行人</button>

    <!-- 提交按钮 -->
    <button class="submit-button" @click="submitReservation">提交预约</button>

    <!-- 提示信息 -->
    <view class="note">
      <text>最多可预约成人4人，儿童3人</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: 0,
      range: [
        {value: 0, text: "中国居民身份证"},
        {value: 1, text: "护照"},
        {value: 2, text: "其他"},
      ],
      selectedValue: 0,
      options: [
        {value: 0, text: "0人"},
        {value: 1, text: "1人"},
        {value: 2, text: "2人"},
        {value: 3, text: "3人"},
      ],
      companions: [],
      companionValue: 0,
      idTypes: [
        {value: 0, text: "中国居民身份证"},
        {value: 1, text: "护照"},
        {value: 2, text: "其他"},
      ],
      mainUser: {
        name: '',
        idType: 0, // 默认选中第一个证件类型
        idNumber: '',
        phoneNumber: ''
      },
      selectedDate: '',  // 存储传递的日期
      selectedTime: ''   // 存储传递的时间
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    addCompanion() {
      if (this.companions.length < 6) {
        this.companions.push({
          name: '',
          idType: 0,
          idNumber: '',
          phoneNumber: ''
        });
      } else {
        uni.showToast({
          title: '最多添加6人',
          icon: 'none'
        });
      }
    },
    removeCompanion(index) {
      this.companions.splice(index, 1);
    },
    submitReservation() {
      if (this.mainUser.name && this.mainUser.idNumber && this.mainUser.phoneNumber) {
        uni.showToast({
          title: '预约提交成功！',
          icon: 'success',
          duration: 2000, // 设置显示时长为2秒
          success: () => {
            // 跳转到 success.vue 页面
            setTimeout(() => {
              console.log(this.mainUser.name)
              console.log(this.mainUser.idNumber)
              console.log(this.value)
              console.log(this.mainUser.phoneNumber)
              console.log(this.selectedValue)
              console.log(this.companionname)
              uni.navigateTo({// success.vue 对应的路径
                url: '/pages/success/personal-success?name=' + this.mainUser.name + '&idNumber=' + this.mainUser.idNumber + '&Value=' + this.value + '&phoneNumber=' + this.mainUser.phoneNumber + '&selectedValue=' + this.selectedValue +'&companionname=' + this.companionname + '&selectedDate=' + this.selectedDate + '&selectedTime=' + this.selectedTime

              });
            }, 2000); // 等待 toast 显示完再跳转
          }
        });
      } else {
        uni.showToast({
          title: '请填写完整的主预约人信息',
          icon: 'none'
        });
      }
    }

  },
  onLoad(options) {
    // 获取从其他页面传递过来的日期和时间参数
    this.selectedDate = options.selectedDate || '';
    this.selectedTime = options.selectedTime || '';
  }
};
</script>


<style scoped>
.container {
  padding: 20px;
}

.cardview {
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

.target {
  font-size: 16px;
  color: #333;
  font-family: PingFangSC-Medium;
  font-weight: 500;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 20px;
  color: #000;
}
.card-texts {
  margin-left: 20px;
}
.reservation-time {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.time-icon {
  margin-right: 10px;
}
.icon {
  height: 38px;
  width: 38px;
}

.reservation-label {
  font-size: 16px;
  font-weight: bold;
}

.reservation-time-text {
  font-size: 14px;
  color: #555;
}

.form-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-title {
  flex: 1;
  text-align: center;
  font-size: 20px;
  color: #000;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  width: 80px;
  font-size: 16px;
}

.form-input {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 8px;
}

.form-description {
  margin-left: 10px;
  font-size: 14px;
  color: #555;
}

.add-companion, .submit-button, .delete-button {
  background-color: #8DCB6D;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0px;
  margin-top: 10px;
  width: 100%;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  
}

.delete-button {
  background-color: #FF6347;
}

.note {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  text-align: center;
}

</style>